<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="/js/html5.min.js"></script>
    <script src="/js/respond.min.js"></script>
    <![endif]-->
</head>
<style>
    .layui-form-item .layui-input-inline {
        width: 300px!important;
    }

    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
    .layui-upload-img{
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
        display: inline-block;
    }
    .layui-upload-list{
        display: flex;
    }
    .layui-table img {
        max-width: 50px;
    }

    .layui-upload-list li{
        position: relative;
    }
    .layui-upload-list li i{
        right: 10px;
        top: 0;
        position: absolute;
        background-color: red;
        width: 22px;
        height: 22px;
        line-height: 22px;
        color: #fff;
        text-align: center;
        font-size: 14px;
        border-radius: 100%;
        cursor: pointer;
    }
</style>

<body>
<form class="layui-form" id="form">
<div class="layui-fluid">
    <div class="layui-row">


            <div class="layui-form-item">
                <label for="username" class="layui-form-label"><span class="x-red">*</span>商品名称</label>
                <div class="layui-input-inline">
                    <input type="text"  name="goods[goods_name]"  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>


			<div class="layui-form-item">
				<label  class="layui-form-label"><span class="x-red">*</span>商品图片</label>
				<div class="layui-input-inline">
					<div class="layui-input-inline">
						<div class="layui-upload">
							<button type="button" class="layui-btn" id="test2">选择图片</button>

							<div class="layui-upload-list" id="demo2"></div>
						</div>
					</div>
				</div>
			</div>



			
			
			                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">商品规格</label>
                        <div class="layui-input-inline">
                            <div class="layui-upload">
                                <button type="button" class="layui-btn" onclick="add()">添加规格</button>
                            </div>
                            <div class="layui-upload-list" style="width: 450px">
                                <div class="layui-form">
                                    <table class="layui-table">
                                        <colgroup>
                                            <col width="200">
                                            <col width="100">
                                            <col width="100">
                                            <col width="50">
                                        </colgroup>
                                        <thead>
                                        <tr>
                                            <th>规格名称</th>
                                             <th>重量</th>
                                              <th>价格</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="tbody">
                                        <tr>
                                            <td><input  name="sku[name][]" autocomplete="off" class="layui-input"></td>
                                            <td><input  name="sku[weight][]" autocomplete="off" class="layui-input"></td>
                                            <td><input  name="sku[price][]" autocomplete="off" class="layui-input"></td>
                                            <td><div class="layui-btn layui-btn-danger layui-btn-xs"  onclick="del(this)">删除</div></td>
                                        </tr>
                                        </tbody>
                                    </table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
			


            <div class="layui-form-item">
                <label for="username" class="layui-form-label"><span class="x-red">*</span>商品排序</label>
                <div class="layui-input-inline">
                    <input type="text" value="1"  name="goods[goods_sort]"  lay-verify="required" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux"><span class="x-red">*</span>越小排越前</div>
            </div


			<div class="layui-form-item">
				<label for="phone" class="layui-form-label"><span class="x-red">*</span>商品状态</label>
				<div class="layui-input-block">
					<input type="radio" name="goods[goods_status]" value="10" title="上架" checked>
					<input type="radio" name="goods[goods_status]" value="20" title="下架">
				</div>
			</div>


		<div class="layui-form-item">
			<label for="phone" class="layui-form-label"><span class="x-red">*</span>推荐</label>
			<div class="layui-input-block">
				<input type="radio" name="goods[goods_hot]" value="10" title="是" checked>
				<input type="radio" name="goods[goods_hot]" value="20" title="否">
			</div>
		</div>


			<div class="layui-form-item">
				<label  class="layui-form-label"><span class="x-red">*</span>描述及细节</label>
				<div class="layui-input-inline">
					<textarea type="text" style="resize: none;height: 150px"  name="goods[desc]"  lay-verify="required" autocomplete="off" class="layui-input"></textarea>
				</div>
			</div>


			<div class="layui-form-item">
				<label  class="layui-form-label"><span class="x-red">*</span>商品详情</label>
				<div class="layui-input-inline">
					<textarea id="container" name="goods[content]"  style="width: 300px;height: 400px"></textarea>
				</div>
			</div>


            <div class="layui-form-item">
                <label for="L_repass" class="layui-form-label"></label>
                <button type="button"  class="layui-btn" id="btn">保存</button>
            </div>

    </div>
</div>
</form>
<script src="/ueditor/ueditor.config.js"></script>
<script src="/ueditor/ueditor.all.js"></script>
<script>
    // 富文本编辑器
    var ue = UE.getEditor('container');
    
        //添加规格
    function add() {
        var html="<tr>\n" +
            "<td><input  name=\"sku[name][]\" autocomplete=\"off\" class=\"layui-input\"></td>\n" +
            "<td><input  name=\"sku[price][]\" autocomplete=\"off\" class=\"layui-input\"></td>\n" +
            "<td><input  name=\"sku[weight][]\" autocomplete=\"off\" class=\"layui-input\"></td>\n" +
            "<td><div class=\"layui-btn layui-btn-danger layui-btn-xs\"  onclick=\"del(this)\">删除</div></td>\n" +
            "</tr>";
        $('#tbody').append(html);

    }
    //删除规格
    function del(_this) {
        _this.parentNode.parentNode.remove();
    }

    //删除图片
    function delimg(obj){
        obj.parentNode.remove();
    }

    layui.use(['layer','form','upload'],function() {
        var layer = layui.layer;
        var upload = layui.upload;
        $ = layui.jquery;


        //多图片上传
        upload.render({
            elem: '#test2'
            ,url: '/goods/upload'
            ,multiple: true
            ,before: function(obj){

            }
            ,done: function(res){
                $('#demo2').append('<li><img src="'+ res.url +'" alt="'+ 1 +'" class="layui-upload-img"><i onclick="delimg(this)" data-id="'+ res.img_id +'">x</i><input type="hidden" name="img_id[]" value="'+ res.img_id +'"></li>');

            }
        });


        $('#btn').click(function () {
            $.ajax({
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url:'/goods/add',
                data:new FormData(document.getElementById("form")),
                processData:false,
                contentType:false,
                success: function (res) {
                    if (res.code){
                        layer.msg(res.msg);
                        setTimeout(function () {
                            parent.location.reload();
                        },500);

                    }else{
                        layer.msg(res.msg);
                    }
                },
                error : function() {

                }
            });
        });


    });



</script>
</body>

</html>
